import { TreeNode } from '@designable/core';
import {
  transformToSchema,
  transformToTreeNode,
} from '@designable/formily-transformer';
import {
  ArrayCards,
  ArrayTable,
  Card,
  Cascader,
  Checkbox,
  DatePicker,
  Field,
  Form,
  FormCollapse,
  FormGrid,
  FormLayout,
  FormTab,
  Input,
  NumberPicker,
  ObjectContainer,
  Password,
  Radio,
  Rate,
  Select,
  Slider,
  Space,
  Switch,
  Text,
  TimePicker,
  Transfer,
  TreeSelect,
  Upload,
} from '@designable/formily-antd';

export const transformSchema = (tree: TreeNode) => {
  const designSchema = transformToSchema(tree);
  return {
    layout: designSchema.form,
    fields: designSchema.schema,
  };
};

export const transformTreeNode = (schema: any) => {
  const designSchema = {
    form: schema.layout,
    schema: schema.fields,
  };
  return transformToTreeNode(designSchema);
};

export const dataSchema = {
  layout: {
    wrapperCol: 16,
  },
  fields: {
    type: 'object',
    properties: {
      name: {
        type: 'string',
        title: '名称',
        required: true,
        'x-decorator': 'FormItem',
        'x-component': 'Input',
        'x-component-props': {
          placeholder: '请输入名称',
        },
      },
      schemaData: {
        type: 'object',
        properties: {
          data: {
            type: 'object',
            properties: {
              urlType: {
                type: 'string',
                title: '数据源',
                default: 'gemini',
                'x-decorator': 'FormItem',
                'x-component': 'Radio.Group',
                enum: [
                  { label: '内置', value: 'gemini' },
                  { label: '外部', value: 'other' },
                ],
              },
              url: {
                type: 'string',
                title: 'URL',
                required: true,
                'x-decorator': 'FormItem',
                'x-component': 'Input.TextArea',
                'x-reactions': {
                  dependencies: [
                    {
                      property: 'value',
                      type: 'string',
                      source: 'schemaData.data.urlType',
                      name: 'urlType',
                    },
                  ],
                  fulfill: {
                    state: {
                      display:
                        "{{$deps.urlType !== 'gemini' ? 'visible' : 'none'}}",
                    },
                  },
                },
              },
              urlKey: {
                type: 'string',
                title: '数据Key',
                required: true,
                'x-decorator': 'FormItem',
                'x-component': 'Input',
                'x-component-props': {
                  placeholder: '请输入数据Key',
                },
                'x-reactions': {
                  dependencies: [
                    {
                      property: 'value',
                      type: 'string',
                      source: 'schemaData.data.urlType',
                      name: 'urlType',
                    },
                  ],
                  fulfill: {
                    state: {
                      display:
                        "{{$deps.urlType === 'gemini' ? 'visible' : 'none'}}",
                    },
                  },
                },
              },
            },
          },
        },
      },
    },
  },
};

export const inputWidget = [
  Input,
  Password,
  NumberPicker,
  // Rate,
  // Slider,
  Select,
  TreeSelect,
  Cascader,
  Transfer,
  Checkbox,
  Radio,
  DatePicker,
  TimePicker,
  Upload,
  Switch,
  ObjectContainer,
];

export const layoutWidget = [
  Card,
  FormGrid,
  FormTab,
  FormLayout,
  FormCollapse,
  Space,
];

export const collectionWidget = [ArrayCards, ArrayTable];

export const displayWidget = [Text];

export const treeWidget = {
  Form,
  Field,
  Input,
  Select,
  TreeSelect,
  Cascader,
  Radio,
  Checkbox,
  Slider,
  Rate,
  NumberPicker,
  Transfer,
  Password,
  DatePicker,
  TimePicker,
  Upload,
  Switch,
  Text,
  Card,
  ArrayCards,
  ArrayTable,
  Space,
  FormTab,
  FormCollapse,
  FormGrid,
  FormLayout,
  ObjectContainer,
};
